import React, { Component } from 'react';
import { getGedanfenlei, getGedanneirong } from '../../utils/api';
import '../../style/all.css';
import './Tuijiangedan.css';

export default class Tuijiangedan extends Component {
	state = {
		// 当前歌单类型id 使用本地存储存储如果跳转到歌单详情页后后退还可以回到原先的位置
		currentTypeId: window.sessionStorage.getItem('gedanlocation') !== null ? Number(window.sessionStorage.getItem('gedanlocation')) : 0,
		imgSrc: ['https://img0.baidu.com/it/u=2463141779,4258219411&fm=26&fmt=auto', 'https://img0.baidu.com/it/u=3207037086,1005361493&fm=26&fmt=auto', 'https://img1.baidu.com/it/u=2221125352,2744484500&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=480', 'https://img0.baidu.com/it/u=3180372500,687288268&fm=26&fmt=auto'],
		randomImgSrc: 0,
		// 歌单类型数组
		types: [],
		// 歌单数组
		gedanList: []
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getGedan();
		this.setState({
			randomImgSrc: Math.floor(Math.random() * 4)
		})
	}
	// 获取歌单和歌单类型
	async getGedan () {
		const types = await getGedanfenlei();
		this.setState({
			types: types.data,
			currentTypeId: this.state.currentTypeId !== 0 ? this.state.currentTypeId : types.data[0].gedantagid
		}, function () {
			this.getGedanneirongs(this.state.currentTypeId);
		})
	}
	async getGedanneirongs (typeId) {
		const gedanList = await getGedanneirong(typeId);
		this.setState({
			gedanList: gedanList.data
		})
	}
	// 切换当前歌单类型
	async changeCurrentTag (typeId) {
		const gedanList = await getGedanneirong(typeId);
		this.setState({
			currentTypeId: typeId,
			gedanList: gedanList.data,
		})
	}
	render () {
		let { imgSrc, randomImgSrc, types, gedanList, currentTypeId } = this.state;
		return (
			<div className='gedan main'>
				<div className='banner'>
					<img className='backs' src={imgSrc[randomImgSrc]} alt="" />
					<div className='avator tophover'>
						<img src={imgSrc[randomImgSrc]} alt="" />
					</div>
					<h2>精品歌单</h2>
					<p>一张褪色的照片，留着淡淡的回忆，这是为您推荐的精品歌单。</p>
				</div>
				<div className='tag'>
					<ul>
						{types.map((item) => (
							<li key={item.gedantagid} onClick={() => this.changeCurrentTag(item.gedantagid)} className={currentTypeId === item.gedantagid ? 'active' : 'red'}>{item.gedantag_name}</li>
						))}
					</ul>
				</div>
				<div className='content'>
					<ul>
						{gedanList.map((item) => (
							<li key={item.gedanid} onClick={() => {
								sessionStorage.setItem('gedanlocation', currentTypeId);
								this.props.history.push(`/index/gedandetail?id=${item.gedanid}`);
							}} className='perse20'>
								<div className='img tophover'>
									<img width='100%' height='100%' src={"http://localhost:3001/" + item.gedan_pic_url} alt="" />
									<div className='gd_mv_hover'></div>
								</div>
								<p>{item.gedan_title}</p>
							</li>
						))}
					</ul>
				</div>
			</div>
		)
	}
}
